@bc-border-codehint-thumbnail:       #ccc;
@bc-border-hint-text:                #999;
@bc-border-radius:                   3px;
@bc-info-popup-bg:                   #00A7FF;
@bc-info-popup-btn:                  #005F8F;
@bc-menu-text:                       #000;
@bc-shadow:                          rgba(0, 0, 0, 0.24);
@bc-text-thin-quiet:                 #777;

@dark-bc-border-codehint-thumbnail:  #333;
@dark-bc-border-hint-text:           #999;
@dark-bc-menu-text:                  #fff;
@dark-bc-shadow:                     rgba(0, 0, 0, 0.24);
@dark-bc-text-thin-quiet:            #bbb;

.parfait-hint-item, .parfait-hint-item div {
    display: inline-block;
    position: relative;
    left: -2px;
}

.sprite_preview {
    border: none;
}

.parfait-hint-thumbnail-wrapper {
    display: block !important;
    margin: 4px 0px 4px 23px; /* FIXME left align to text */
    vertical-align: middle;
    font-size: 0px; /* to remove whitespace in inline-block */
}

.parfait-hint-thumbnail {
    border-radius: @bc-border-radius;
    border: 1px solid @bc-border-codehint-thumbnail;
    width: 120px;
    height: 90px;
    overflow: hidden;
    vertical-align: top;
    
    .dark & {
        border: 1px solid @dark-bc-border-codehint-thumbnail;
    }
}

.parfait-hint-helper {
    height: 100%;
    vertical-align: middle;
}

.parfait-hint-icon {
    background: url("img/psd-lens-sprite.svg") no-repeat -4px -52px;
    width: 16px;
    height: 15px;
    vertical-align: middle;
    margin-right: 2px;
}

.parfait-hint-text {
    box-sizing: border-box;
    width: 16px;
    height: 15px;
    font-family: serif;
    font-size: 13px;
    text-align: center;
    line-height: 1;
    vertical-align: middle;
    border: 1px solid @bc-border-hint-text;
    margin-right: 2px;
    
    body.dark & {
        border: 1px solid @dark-bc-border-hint-text;
    }
}

.parfait-hint-value-description {
    font-size: 10px;
    color: @bc-text-thin-quiet;
    
    body.dark & {
        color: @dark-bc-text-thin-quiet;
    }
}

.parfait-hint-color-chip, .parfait-hint-gradient-chip {
    width: 15px;
    height: 15px;
    border-radius: @bc-border-radius;
    box-shadow: inset 0 0 0 1px @bc-shadow;
    vertical-align: middle;
    
    body.dark & {
        box-shadow: inset 0 0 0 1px @dark-bc-shadow;
    }
}

.parfait-hint-property {
    color: @bc-menu-text;
    vertical-align: middle;
    
    body.dark & {
        color: @dark-bc-menu-text;
    }
}

.parfait-hint-item .parfait-hint-value-description.fallback {
    display: none;
}

.parfait-hint-hide-property .parfait-hint-property {
    display: none;
}

.parfait-hint-hide-property .parfait-hint-value-description.fallback {
    display: inline-block;
}

.parfait-hint-hide-description .parfait-hint-value-description {
    display: none;
}

.parfait-hint-value {
    color: @bc-menu-text;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    font-style: italic;
    
    body.dark & {
        color: @dark-bc-menu-text;
    }
}

.parfait-hint-description-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.parfait-plain-hint {
    margin-left: 22px;
}


.editor-callout {
    border-radius: @bc-border-radius;
    background: @bc-info-popup-bg;
    box-shadow: 0 0 20px @bc-shadow;

    position: absolute;
    max-width: 250px;
    padding: 9px 12px 9px 12px;
    z-index: 2;

    font-family: "SourceSansPro";
    color: white;
    line-height: 1.5;
    visibility: hidden;
    
    /* animated properties */
    opacity: 1.0;
    -webkit-transform: scale(0);
    transform: scale(0);
    
    body.dark & {
        box-shadow: 0 0 20px @dark-bc-shadow;
    }
}

.editor-callout.visible {
    visibility: visible;
}

.editor-callout.open {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.editor-callout.animateOpen {
    -webkit-transition: -webkit-transform 125ms;
    transition: transform 125ms;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.editor-callout.animateClose {
    /* Make the animation use the GPU--especially important for retina. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: opacity 125ms ease-in, -webkit-transform 125ms;
    transition: opacity 125ms ease-in, transform 125ms;
    opacity: 0.0;
}

.editor-callout .notch {
    position: absolute;
    width: 23px;
    height: 15px;
    overflow: hidden;
}

.editor-callout .notch:after {
    content: "";
    background-color: @bc-info-popup-bg;
    width: 20px;
    height: 20px;
    display: block;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.editor-callout.bottom {
    margin-top: 0px;
}

.editor-callout.bottom .notch {
    top: -15px;
}

.editor-callout.bottom .notch:after {
    margin-top: 7.5px;
}

.editor-callout.top {
    margin-top: -15px;
}

.editor-callout.top .notch {
    bottom: -15px;
}

.editor-callout.top .notch:after {
    margin-top: -14px;
}

.editor-callout .dismiss-button {
    background: #005F8F;
    border-radius: @bc-border-radius;
    display: inline-block;
    padding: 4px 7px;
    margin: 7px 7px 4px 0;

    color: white;
    line-height: 1;
    font-size: 11px;

    cursor: pointer;
}

.editor-callout-message ol {
    margin: 2px 0 2px 20px;
}


/* CSSHintView #image-merged */
.parfait-hint-thumbnail-merged {
    vertical-align: middle;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
}

.parfait-hint-icon.merged {
    background: url("img/group-icon.svg");
}

.parfait-hint-thumbnail .spinner {
    margin-left: 42px;
    margin-top: 27px;
}

.parfait-hint-offline {
    background-image: url(img/cloudui.png);
}

.parfait-hint-error {
    display: none;
}

.parfait-hint-error.show {
    font-size: 11px;
    font-style: italic;
    line-height: 14px;
    width: 120px;
    white-space: normal;
    margin-left: 10px;
}
